<template>
	<div class="alipay">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>支付宝转账</span>
			<span class="img"></span>
		</div>	
		<li>第一步：  请复制或者记牢我们的支付宝账号</li>
		<div class="inner">
			<img src="../../assets/recharge_pic_zhifubao.png"/>
			<div class="center">
				<p style="padding: 0;">支付宝账号：<span id="copy-text">zv001@51cli.com </span><button class="copy"id="copy"   data-clipboard-action="copy" data-clipboard-target="#copy-text">复制</button></p>
				<span style="color: #56627c;">谋略家</span>
			</div>
		</div>
		
		<li>第二步：  手机打开支付，快速转账</li>
		<div class="continer">
			<img src="../../assets/alipay-pay.png"/>
			<p>
				<span>打开手机支付宝</span>
				<span>选择转账到支付宝账号</span>
			</p>
			<p style="font-size: 0.32rem; margin: .5rem 0;">完成后，手机登陆APP查看账户余额</p>
		</div>
		
		<p style="text-align: center; display: block;line-height: 0.4666rem; margin-top: 0.96rem;">
			到账时间<br />
			08：30-17:30（1小时内到账）<br />
			17:30以后（次日09:30前到账）<br />
			如急需到账，请电话<span style="color: #FFFC25;">400-053-7518</span>
		</p>
	</div>
</template>

<script>
	import "../../util/clipboard.min.js"
	import my from '@/api/my/index'
	import { toast,Money } from '@/util/index'
	import Button from '@/components/Button'
	export default{
		data(){
			return{
				money:"",
				account:""
			}
		},
		computed: {
			isActive: function () {
				if (Money(this.money)&&this.account) {
					return true
				} else {
					return false
				}
			}
		},
		mounted(){
			this.copyInit();
	    },
	    components: {
			'v-button': Button
		},
		methods:{
			back(){
			    this.$router.back(-1);
			},
			login(){
				
				if(this.isActive) {
					this.$router.push({path:'/alipayDeatil'})
				}
			},
			copyInit(){
	    		var clipboard = new Clipboard('.copy');
	          	clipboard.on('success', function (e) {
	            console.log(e);
	            toast('复制到剪切板成功');
	          });
	          clipboard.on('error', function (e) {
	            console.log(e);
	            toast('复制到剪切板失败，请手动复制');
	          });
	    		
	    	},
		},
		beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		    next()
		}
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.alipay{
	color:white;
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: 30px;
			height: 30px;
		}
	}
	li{
		padding: 0 @p30;
		list-style: none;
		font-size: @f28;
		background: @bgColor;
		height: .98rem;
		line-height: .98rem;
	}
	p{
		padding:0 @p30;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: @Color;
		font-size: @f24;
	}
	.inner{
		padding: 0 @p30;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 2.5rem;
		background: @liBg;
		.center{
			margin-left: .7rem;
			flex: 1;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			align-items: flex-start;
			#copy{
				color: #25abee;
				border: none;
				background:#141723 ;
				margin-left:.2rem ;
			}
			color: white;
			p{
				color: white;
				margin-bottom:.2rem;
				span{
					margin-left: .5rem;
					color: #25abee;
				}
				#copy-text{
					margin-left: 0;
					color: #FFFFFF;
				}
			}
		}
	}
	.continer{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: @liBg;
		img{
			margin: .6rem 0;
		}
		p{
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: white;
			font-size: @f28;
			span{
				margin: 0 .7rem;
			}
		}
	}
	.login{
		margin-top: 1.226666rem;
		width: 9.2rem;
		height: 1.17333rem;
		line-height: 1.17333rem;
		text-align: center;
		color: @Color;
		border: 2px @Color solid;
		margin: 0 auto;
		font-size: 0.48rem;
		border-radius: 0.08rem;
		
	}
}

</style>